<template>
    <div>
        <h-section title="PBI目录" collapse>
            <a-form layout="inline" :model="form">
                <a-row>
                    <a-col :span="12">
                        <a-form-item label="PBI目录" :span="24">
                            {{ catalogName }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="产品层级" :span="24">
                            {{ $filters.catalogTypeFilter(form.type) }}
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <div style="font-size: 14px; margin-left: 40px; margin-bottom: 12px">活动版本设置</div>
            <HuodongVersion :id="form.catalogCode" />
        </h-section>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { transformDataByFlatProperty } from '@/utils/tree';
import HuodongVersion from './HuodongVersion.vue';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        HuodongVersion
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const state = reactive<any>({
            form: {
                catalogCode: '',
                type: ''
            },
            visible: false,
            options: [],
            catalogName: ''
        });

        const getNodeItem = (tree: any[]) => {
            for (let i = 0; i < tree.length; i++) {
                const item = tree[i];
                if (item.catalogCode === state.form.catalogCode) {
                    state.catalogName = item.catalogName;
                    return;
                } else {
                    if (item.subNodes && item.subNodes.length) {
                        getNodeItem(item.subNodes);
                    }
                }
            }
        };

        const getOptions = async () => {
            const { moule, success } = await api.pbiModel.getProductCatalogTreeData();
            if (success) {
                let options = [...JSON.parse(moule)];
                options = transformDataByFlatProperty(options);
                state.options = [...options];
                getNodeItem(state.options);
            }
        };

        const init = () => {
            getOptions();
            state.form.catalogCode = props.detail.catalogCode;
            state.form.type = props.detail.catalogType;
        };
        init();
        return {
            ...toRefs(state)
        };
    }
});
</script>

<style scoped>
</style>